/**
 原生css变量的定义=》类似less/sass定义变量
 语法：
 1. 定义：--css变量名:css变量值
 2. 使用：var(--css变量名)
 作用域：
 1. 局部变量 =》 .类名 {    }
 2. 全局变量 =》 :root {    }
*/
@import '@/styles/hairline.scss';

:root {
  --geek-border: 10px solid red;
}
.cssVar {
  /* 局部css变量 */
  --geek-color: orange;
  color: var(--geek-color);
  font-size: 30px;
}

.cssBox {
  /* 读取:root中定义的全局变量 */
  border: var(--geek-border);
}

.top{
  border-bottom: 1px solid red;
}

.bottom{
  // border-top: 1px solid green;

  // 解决1px边框像素bug => 真1px
  position: relative;
  @include hairline(top, green);
}

.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.ticon{
  font-size: 30px;
}
